<template>
  <div class="BookList">
    <!-- 使用router-link实现跳转-->
    <router-link :to="'/HomeContainer/BookList/BookInfo/'+item.id" class="books-item" v-for="item in booklist" :key="item.id">
      <img :src="item.img_url" tag="div">
    <h1 class="books-title">{{item.title}}</h1>
    <div class="info">
      <p class="price">
        <span class="now">{{item.sell_price}}</span>
        <span class="old">{{item.market_price}}</span>
        <span class="host">{{item.zhaiyao}}</span>
      </p>
      <p class="sell">
        <span>热卖中</span>
        <span>剩余{{item.Inventory}}本</span>
      </p>
    </div>
    </router-link>

    <!-- 使用编程式路由导航实现跳转-->
    <!-- <div class="books-item" v-for="item in booklist" :key="item.id" @click="getDetail">
      <img :src="item.img_url">
    <h1 class="books-title">{{item.title}}</h1>
    <div class="info">
      <p class="price">
        <span class="now">{{item.sell_price}}</span>
        <span class="old">{{item.market_price}}</span>
        <span class="host">{{item.zhaiyao}}</span>
      </p>
      <p class="sell">
        <span>热卖中</span>
        <span>剩余{{item.Inventory}}本</span>
      </p>
    </div>
    </div> -->
    <mt-button type="danger" size='large' @click=getMore>加载更多</mt-button>

  </div>

</template>

<script>
  export default{
    data(){
      return{
        id:this.$route.params.id,
        booklist:[
          {
            id:1,
            title:"一人之下",
            add_time:"2020-03-23T16:14:29.000Z",
            zhaiyao:"动漫堂-米二 ",
            click:"218.2亿+",
            img_url:"https://manhua.qpic.cn/vertical/0/13_14_14_2908dee17c39620a5185ac95767f6583_1497334441884.jpg/420",
            market_price:68,
            sell_price:59,
            Inventory:98

          },
          {
             id:2,
             title:"我是大神仙",
             add_time:"2019-05-13T16:14:29.000Z",
             zhaiyao:"盛世卡漫",
             click:"88万+",
             img_url:"https://manhua.qpic.cn/vertical/0/09_21_59_9cc0de380d9afe468d2f6f7a547a9408.jpg/420",
             market_price:22,
             sell_price:19,
             Inventory:75
          },
          {
             id:3,
             title:"修仙归来在校园",
             add_time:"2019-04-23T18:24:29.000Z",
             zhaiyao:"岛上Project ",
             click:"99万+",
             img_url:"https://manhua.qpic.cn/vertical/0/12_17_03_45a782453184e4c263b2f3f7aa71c572_1565600625712.jpg/420",
             market_price:40,
             sell_price:32,
             Inventory:60
          },
          {
             id:4,
             title:"尸兄（我叫白小飞）",
             add_time:"2020-05-23T16:14:29.000Z",
             zhaiyao:"七度魚",
             click:"273.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/28_01_20_f04671183264bf2defb2978882f0d0af_1585329611799.jpg/420",
             market_price:56,
             sell_price:49,
             Inventory:118
          },
          {
             id:5,
             title:"传武",
             add_time:"2018-11-23T16:14:29.000Z",
             zhaiyao:"GK工坊",
             click:"213.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/30_13_06_0f73c7f226303185f0f6d1935d27f398_1585544813567.jpg/420",
             market_price:88,
             sell_price:67,
             Inventory:160
          },
          {
             id:6,
             title:"妹子与科学",
             add_time:"2018-11-13T16:14:29.000Z",
             zhaiyao:"诈术师德德",
             click:"236.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/17_17_06_4ec73c6808fc0dd647f4cb147b0d3853.jpg/420",
             market_price:77,
             sell_price:67,
             Inventory:18
          },
          {
             id:7,
             title:"青帝传",
             add_time:"2015-01-13T16:14:29.000Z",
             zhaiyao:"星艺文娱",
             click:"111.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/13_15_48_4352535808c6101dc703c39e83e1c164_1578901697295.jpg/420",
             market_price:56,
             sell_price:42,
             Inventory:32
          },
          {
             id:8,
             title:"重生之都市修仙",
             add_time:"2016-04-23T16:14:19.000Z",
             zhaiyao:"大行道动漫",
             click:"101.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/21_09_50_7980ea4e92d8d01e162d6d1bdced1224_1587433830141.JPG/420",
             market_price:68,
             sell_price:32,
             Inventory:210
          },
          {
             id:9,
             title:"武炼巅峰",
             add_time:"2020-03-27T16:14:19.000Z",
             zhaiyao:"噼咔噼",
             click:"112.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/30_17_18_c5599079b82aca6d00c35a02f9d0993c_1535620691678.jpg/420",
             market_price:88,
             sell_price:76,
             Inventory:116
          },
          {
             id:10,
             title:"重生之都市修仙",
             add_time:"2010-04-17T18:14:19.000Z",
             zhaiyao:"大行道动漫",
             click:"1152.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/21_09_50_7980ea4e92d8d01e162d6d1bdced1224_1587433830141.JPG/420",
             market_price:56,
             sell_price:70,
             Inventory:120
          },
          {
             id:11,
             title:"炼气练了三千年",
             add_time:"2015-08-18T18:18:19.000Z",
             zhaiyao:"刺猬猫阅读",
             click:"182.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/29_09_49_ad98e1d1226eb0b734fb7679070ba873_1569721781334.jpg/420",
             market_price:56,
             sell_price:48,
             Inventory:60
          }
        ],
        booklistMore:[
          {

             title:"斗罗大陆4终极斗罗",
             add_time:"2025-07-19T16:18:19.000Z",
             zhaiyao:"神漫",
             click:"189.7亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/22_16_32_d4b4ada20af80345411df76d1cc65da3_1548145972844.jpg/420",
             market_price:66,
             sell_price:38,
             Inventory:20
          },
          {

             title:"万渣朝凰签约",
             add_time:"2017-09-28T18:18:19.000Z",
             zhaiyao:"时代漫王",
             click:"122.9亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/15_23_27_fa7a14c550b135ae93d3f1e3d14e6928_1589556464777.jpg/420",
             market_price:59,
             sell_price:48,
             Inventory:110
          },
          {

             title:"驭灵师",
             add_time:"2018-11-38T18:18:19.000Z",
             zhaiyao:"时代漫王",
             click:"22.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/02_16_29_781bb66fd0c9bc66308ccf97fd9c244b_1564734550756.jpg/420",
             market_price:45,
             sell_price:28,
             Inventory:63
          },
          {

             title:"狐妖小红娘",
             add_time:"2020-09-14T18:18:19.000Z",
             zhaiyao:"小新",
             click:"160.8亿+",
             img_url:"https://manhua.qpic.cn/vertical/0/17_16_12_cd4e6fe51036f100d5f2c1eb1289788e.jpg/420",
             market_price:68,
             sell_price:64,
             Inventory:32
          },
        ]
      }
    },

  methods:{
    getMore(){
       this.booklist=this.booklist.concat(this.booklistMore)
    },
     getDetail(id){
      //使用js的形式进行路由跳转
      this.$router.push(`/HomeContainer/BookList/BookInfo/${id}`)
    }
  }
  }
</script>

<style scoped>
  .BookList{
    display: flex;
    flex-wrap:wrap;
    padding: 7px;
    justify-content: space-between;
  }
  .books-item{
    width: 49%;
    border:1px solid #ccc ;
    box-shadow:0 0 0 8px #ccc;
    margin: 4px 0;
    padding: 2px;
    display: flex;
    flex-direction: column;
    justify-content:space-between ;
    min-height: 293px;
  }
  img{
    width:100% ;
  }
  .books-title{
    font-size: 14px;
  }
  .info{
    background-color: #EEEEEE;
  }
  p{
    margin: 0;
    padding: 5px;
  }

  .now{
    color: red;
    font-weight: bold;
    font-size: 16px;
  }
  .old{
    text-decoration: line-through;
    font-size: 12px;
    margin-left:10px ;
  }
  .sell{
    display: flex;
    justify-content: space-between;
    font-size: 13px;
  }
  .host{
    margin-left: 22px;
    color: #00FFFF;
  }
</style>
